@extends('develop.layoutEdit')

@section('title')

    <li class="cur">
        <span>订单取消原因设置</span>
    </li>

@endsection


@section('css')
    <link rel="stylesheet" href="/static/libs/jquery-ui/jquery-ui.min.css" media="screen">
    <style>
        .layer-go-back{
            display:none;
        }
    </style>
@endsection

@section('content')

    <div class="alert alert-success" role="alert" style="margin-top:10px;width: 50%;margin-left: 15px;">
        选中一行并拖动鼠标，进行排列 <strong>字段名称</strong> 组合顺序
    </div>

    <div class="comm_content" style="margin-left: 15px;margin-top:20px;width: 50%;">
        <div class="panel panel-default">
            <div class="panel-heading">订单取消原因设置</div>
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align:left;">取消原因</th>
                    <th style="text-align:center;">操作</th>
                </tr>
                </thead>
                <tbody id="sortable_tr">
                </tbody>
            </table>
            <div class="panel-footer">
                <input type="button"  value="添加原因" onclick="func.addTr();" class="btn btn-success" >
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label"></label>
        <div class="col-sm-9">
            <input type="hidden" name="function_id" id="function_id" value="{{ $function_id or ''}}">
            <input type="button"  value="保存" onclick="func.edit();" class="btn btn-success" >
        </div>
    </div>

@endsection

@section('js')
    <script type="text/javascript" src="/static/libs/jquery-ui/jquery-ui.min.js?v=20160303"></script>
    <script>

        var configure_json = 0 ;
        if ( !E.isEmpty({!! $configure_json or 0 !!}) ) {
            configure_json = eval( '(' + '{!! $configure_json or 0 !!}'  + ')' );
        }


        function search() {

        var html = '' ;
        var conut= 1;
        //已存在配置
        if( !E.isEmpty( configure_json['configure'] ) ) {
            $.each( configure_json['configure'] , function( k ,v ) {
                if(!E.isEmpty(v )){
                    html +='<tr  class="column" name="'+conut+'" id="tr'+conut+'">';
                    html +='<td style="text-align:center;"><input  type="text" class="form-control amount"  name="item_name" value="'+ v.item_name +'"></td>';
                    html +='<td  class="cancel" style="text-align:center;" ><span class="btn btn-danger" onclick="func.del('+conut+');">删除</span> </td>';
                }

                html +='</tr>';
                conut++;
            }) ;
        }else{
            html +='<tr  class="column" name="1" id="tr1">';
            html +='<td style="text-align:left;"><input  type="text" class="form-control amount"  name="item_name" value=""></td>';
            html +='<td  class="cancel" style="text-align:center;"><span class="btn btn-danger"  onclick="func.del(1)">删除</span> </td>';
            html +='</tr>';
        }

        //向表格中插入行
        $('#sortable_tr').append( html ) ;

        //行拖动事件
        $("#sortable_tr").sortable({
            cursor: "move"
        });
    }

    var func = {

        //保存
        edit:function(){

            var item_array = [];
            var configure = {};
            var function_id = $('#function_id').val() ;
            var msg ='';

            //循环保存
            $('.column').each( function () {

                var item_name = $(this).find('input[name=item_name]').val() ;
                if(item_name){
                    var item = {
                        item_id:$(this).attr('name'),
                        item_name: item_name
                    };

                    item_array.push(item);
                }
            }) ;
            [].push.apply(configure,item_array);

            //删除对象中的length属性
            delete(configure['length']);
            configure.function_id = function_id;

            //参数判断
            if( E.isEmpty( configure.function_id ) || !E.isInt( configure.function_id ) ) {
                msg += '参数错误<br/>' ;
            }
            if(msg){
                layer.alert(msg,{icon:2});
                return false;
            }

            layer.confirm('您确认保存订单取消原因设置吗？', {icon:3}, function( index ) {
                layer.close( index );
                E.ajax({
                    type:'get',
                    url: '/lar/develop/function/store/'+function_id,
                    dataType:'json',
                    data: configure,
                    // 返回值判断
                    success: function ( obj ){

                        if ( obj.code == 200 ) {
                            layer.alert( obj.message , { icon: 1,time : 1500 } ) ;
                        } else {
                            layer.alert( obj.message , { icon: 2 } ) ;
                        }
                    }
                });
            });

        },
        del:function(k){
            layer.confirm('您确认要删除该选项吗？',{icon:3},function(){
                $('#tr'+k).remove();
                layer.closeAll();
            });
        },

        addTr:function(){

            var column_count = 0;

            $('.column').each( function () {

                var item_name = $(this).find('input[name=item_name]').val() ;
                if(!item_name){
                    column_count++;
                }
            }) ;

            if(column_count <= 0){
                var lengthTr = $('.column').length+1;
                var html = '' ;
                html +='<tr  class="column" name="'+lengthTr+'" id="tr'+lengthTr+'">';
                html +='<td style="text-align:left;"><input  type="text" class="form-control amount"  name="item_name" value=""></td>';
                html +='<td  class="cancel" style="text-align:center;" ><span class="btn btn-danger"  onclick="func.del('+lengthTr+')">删除</span> </td>';
                html +='</tr>';
                //向表格中插入行
                $('#sortable_tr').append( html ) ;

            }

        }
    } ;

    $(function () {
        search() ; //加载查询
    }) ;

    </script>
@endsection